<template>
  <div>
    <div class="head">
      <a href="#">
        <img :src="img1" />
      </a>
    </div>
    <div class="title1">
      <p>国内主要城市疫情情况</p>
      <h1>数据更新至 2021.01.07 14:55</h1>
    </div>
    <div id="first">
      <div class="f-head"></div>
    </div>

    <div class="title2">
      <p>我国疫情分析</p>
      <h2>数据更新至 2021.01.07 14:55</h2>
    </div>
    <div id="second"></div>
    <div class="footer">
      <h3>想了解更多？</h3>
      <a
        href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner"
      >
        <div class="button">
          <el-row>
            <el-button type="success">点我看更多</el-button>
          </el-row>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
let echarts = require("echarts");
export default {
  data() {
    return {
      img1: require("../assets/p2.jpg"),
    };
  },
  computed: {},
  methods: {
    // 第一幅图
    getOption1() {
      return {
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false,
        },
        dataset: {
          source: [
            [
              "month",
              "January",
              "February ",
              "March ",
              "April",
              "May ",
              "June",
              "July ",
              "August",
              "September",
              "October",
              "November",
              "December",
            ],
            ["河北", 53, 30.4, 40, 44, 39, 45, 50, 40, 60, 55, 62, 75],
            ["香港", 25, 50, 65, 70, 60, 55, 50, 53, 54, 60, 70, 72, 80],
            ["上海", 50, 67.2, 79.5, 60, 65, 62, 63, 50, 43, 60, 70, 71],
            ["陕西", 2, 5, 7, 4, 2, 10, 8, 9, 10, 20, 35, 40, 38],
          ],
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          { type: "line", smooth: true, seriesLayoutBy: "row" },
          { type: "line", smooth: true, seriesLayoutBy: "row" },
          { type: "line", smooth: true, seriesLayoutBy: "row" },
          { type: "line", smooth: true, seriesLayoutBy: "row" },
          {
            type: "pie",
            id: "pie",
            radius: "35%",
            center: ["50%", "25%"],
            label: {
              formatter: "{b}: {@June} ({d}%)",
            },
            encode: {
              itemName: "month",
              value: "June",
              tooltip: "June",
            },
          },
        ],
      };
    },

    // 第二幅图
    getOption2() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["治愈", "确诊", "疑似"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
          },
        ],
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
          },
        ],
        series: [
          {
            name: "治愈",
            type: "bar",
            label: {
              show: true,
              position: "inside",
            },
            data: [
              60,
              1542,
              47260,
              76610,
              78905,
              80087,
              81348,
              81459,
              85122,
              85968,
              86684,
              87720,
            ],
          },
          {
            name: "确诊",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
            },
            data: [
              1227,
              12725,
              80201,
              82413,
              83959,
              84160,
              84834,
              86884,
              87664,
              88461,
              92465,
              98561,
            ],
          },
          {
            name: "疑似",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "left",
            },
            data: [-5794, -17988, -587, -153, -5, -2, -7, -4, 0, -3, -2, -7],
          },
        ],
      };
    },

    toDraw() {
      let chart1 = echarts.init(document.getElementById("first"));
      let chart2 = echarts.init(document.getElementById("second"));
      let option1 = this.getOption1();
      let option2 = this.getOption2();
      chart1.setOption(option1);
      chart2.setOption(option2);
    },
  },
  created() {},
  mounted() {
    this.toDraw();
  },
};
</script>
<style scoped>
a {
  text-decoration: none;
}
.head {
  height: 180px;
  /* background-color: pink; */
  margin: 0;
}
.head img {
  height: 150px;
  width: 100%;
}
#first {
  /* margin-top: 50px; */
  height: 500px;
}
.title1 {
  color: #000;
  margin-top: 0;
  margin-left: 0;
  line-height: 10px;
}
.title1 p {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}
.title1 h1 {
  font-size: 13px;
  color: darkgray;
}
.title2 {
  margin-top: 50px;
}
.title2 p {
  margin-top: 50px;
  font-size: 20px;
  font-weight: bold;
}
.title2 h2 {
  font-size: 13px;
  color: darkgray;
}
#second {
  height: 700px;
  margin-top: 50px;
}
.footer {
  position: relative;
  top: 30px;
  left: 550px;
  display: inline-block;
}
.footer h3 {
  color: darkgray;
  font-size: 14px;
}
</style>